<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>xieyanzu</li>
        <li>xieyanzu</li>
        <li>xieyanzu</li>
        <li>xieyanzu</li>
        <li>xieyanzu</li>
    </ul>

    <ol>
        <li>xiaoxie</li>
        <li>xiaoxie</li>
        <li>xiaoxie</li>
        <li>xiaoxie</li>
        <li>xiaoxie</li>
    </ol>

    <form action="">
        <input type="text" name="username"><br>
        <input type="radio" name="sex" value="nan"> 男<br>
        <input type="radio" name="sex" value="nv"> 女<br>
        <input type="radio" name="sex" value="renyao"> renyao<br>
        <input type="submit">
    </form>
    
    <script>
        // 1. document.getElementById  通过id获取
        // js 提供3中常用获取元素的方法
        // 2. document.getElementsByTagName
        var a=document.getElementsByTagName('li');
        console.log(a);
        // 获取到的是一个html collection  html 集合
        // html collection 属于一个伪数组
        // 这个东西可以遍历 有长度 但是不能使用数组的相关方法
        // 用var定义的 i 属于全局变量
        // 
        // for(let i=0;i<a.length;i++){
        //     console.log(a[i]);
        //     // a[i].style.backgroundColor='red';
        //     a[i].onclick=function(){
        //         console.log('第'+i+'个');
        //     }
        // }

        // i=7;

        var ol1=document.getElementsByTagName('ol');
        console.log(ol1);
        // 注意使用getElementsByTagName 获取到的是一个数组
        // 不能再直接使用方法  需要先获取到里面的元素
        var li1=ol1[0].getElementsByTagName('li');
        console.log(li1);

        // getElementsByTagName 
        // 不管有多少个元素  获取到的都是一个伪数组
        // 一个元素  那么数组的长度为1
        // 没有元素  返回一个空的数组
        var p1= document.getElementsByTagName('p');
        console.log(p1);


        // 第三种获取元素的方法
        // Elements   最后一个s代表复数  有多个
        // 元素们
       var sex1= document.getElementsByName('sex');
       console.log(sex1);
    </script>
</body>
</html>